<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Flot Examples</title>
    <link href="layout.css" rel="stylesheet" type="text/css"></link>
    <!--[if IE]><script language="javascript" type="text/javascript" src="../excanvas.pack.js"></script><![endif]-->
    <script language="javascript" type="text/javascript" src="./flot/jquery.js"></script>
    <script language="javascript" type="text/javascript" src="./flot/jquery.flot.js"></script>
    
    <!--Incluyendo ExtJS -->

    <script type="text/javascript" src="./ext/adapter/ext/ext-base.js"></script>
    <script type="text/javascript" src="./ext/ext-all-debug.js"></script>
    <script src="./javascript/peticionDatos.js" type="text/javascript"></script> 
 </head>
    <body>
    <h1>Flot Examples</h1>

    <div id="placeholder" style="width:600px;height:300px"></div>

    <p>Flot supports lines, points, filled areas, bars and any
    combinations of these, in the same plot and even on the same data
    series.</p>

<script id="source" language="javascript" type="text/javascript">

var pet=[];
  
function errorAjax(){
    error("peticion ajax no realizada");
}

function peticion() {

    //GUnload();
    //killAll();
	//Primero tomariamos el elemento DOM para crear un div mediante update en el que insertaremos la grafica
    //Ext.get('').update('<center><img alt="cargando" align="middle" src="images/ajax-loader.gif"/></center>',false);
    Ext.Ajax.request({
       url: 'http://localhost/web/php/calculo_est.php',
       success: pinta,
       failure: errorAjax
    });
}

function pinta(respuesta) {
    //[[0,3],[4,8],[8,5],[9,13],[14,28],[19,56],[25,112]]

	
   /* for (var i = 0; i < 14; i += 0.5)
        d1.push([i, Math.sin(i)]);*/
    var d2=[];
    var d1=Ext.util.JSON.decode(respuesta.responseText);
	var fi=d1[0].TIEMPO;
	for (var i=0;i<d1.length;i++){
	     d2.push([d1[i].TIEMPO,d1[i].OCUPACION]);
		 //alert ('i vale:  ' +i+'  '+d2[i][0]+'  '+d2[i][1]);
	}
	//d2= [[(new Date("1990/01/01")).getTime(),60],[(new Date("2000/01/01")).getTime(),50]];
	//alert(d2);
//	var options = {
//		bars: { show: true, lineWidth: 10,fill: true, fillColor: "rgba(0,255,0,0.2)"} 
//    };
    //alert(fi.toUTCString());
	fiUTC=new Date(fi);
	var mes=fiUTC.getMonth();
	mes=new Number(mes)+1;
    var fecha=fiUTC.getDate()+'-'+mes+'-'+fiUTC.getFullYear();
	datos=[{label:fecha,data:d2}];
	var options = {
		bars: { show:true,fill:true,barWidth:60*60*1000,align:"left"},
		//lines: { show: false},
		//points:{show:false},
		xaxis: {mode:"time",
				timeformat:"%H:%M ",
				tickSize:[2,"hour"],
				autoscaleMargin:0.02,
				//minTickSize: [1, "hour"],
				min:fi,
				max:fi+(60*60*24*1000)},
		yaxis: {min:0.0,max:1.0}
	};
		//alert(getAxes().xaxis.ticks);
	$.plot($("#placeholder"), datos,options);

    var d3 = [];
    for (var i = 0; i < 14; i += 0.5)
        d3.push([i, Math.cos(i)]);
    var d4 = [];
    for (var i = 0; i < 14; i += 0.1)
        d4.push([i, Math.sqrt(i * 10)]);
    
    var d5 = [];
    for (var i = 0; i < 14; i += 0.5)
        d5.push([i, Math.sqrt(i)]);
		

    

        //{
        //    data: d1,
        //    lines: { show: true,fill: true,fillColor: "rgba(255, 0, 0, 0.2)"}
        //},
      /*  {
            data: d2,
            bars: { show: true, align: "center", fill: true,fillColor: "rgba(0, 255,0 , 0.2)"}
        }*/
  
        //{
        //    data: d3,
        //    points: { show: true }
        //},
        //{
        //    data: d4,
        //    lines: { show: true }
        //},
        //{
        //    data: d5,
        //    lines: { show: true },
        //    points: { show: true }
        //}
    //]);
};

peticion();
</script>

 </body>
</html>